<template>
	<view style="background-color: #67b1ff;height: 95vh;">
		<view class="work-img">
			<img src="../../static/img.jpg" alt="" style="width: 100%; height: 100%;">
		</view>
		<view class="work-choose" @click="workShow=true">
			<view class="">
				{{chooseName}}
			</view>
			<view class="">
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
		</view>
		<u-select v-model="workShow" :list="courseList" @confirm="confirm"></u-select>
		<view class="img-content" v-if="Object.keys(info).length !== 0">
			<view class="img-style">
				<img :src="info.works" alt="" style="width: 100%;height: 100%;">
			</view>
			<view class="img-name">
				{{info.title}}
			</view>
			<view class="img-tag">
				<u-tag text="雪月夜" type="primary" />
			</view>
			<view class="user-style">
				{{info.uploadName}} {{info.evaluateStar}}岁 2023.09.29
			</view>
		</view>
		<view class="no-work" v-if="Object.keys(info).length === 0">
			暂无作品！
		</view>
		<view class="img-operate" v-if="Object.keys(info).length !== 0">
			<view class="pre-pic" @click="prePicture"><u-icon name="arrow-left" color="#ffffff"></u-icon>上一张</view>
			<view class="pre-pic" @click="nextPicture">下一张 <u-icon name="arrow-right" color="#ffffff"></u-icon></view>
		</view>
	</view>
</template>

<script>
	import {
		getCourseList,
		getTraineeWorksList
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				workShow: false,
				courseList: [{
					value: '',
					label: '全部'
				}],
				workClassList: [],
				chooseName: '全部作品',
				trainId: uni.getStorageSync('trainId'),
				info: {},
				courseId: '',
				imgIndex: 1,
				imgSum: 4,
				imgUrl: '',
				imgList: [],
			}
		},
		onLoad() {
			this.getCourseList()
			this.getTraineeWorksList()
		},
		methods: {
			confirm(e) {
				console.log("2", e);
				this.chooseName = e[0].label
				this.courseId = e[0].value
				this.getTraineeWorksList()
			},
			async getCourseList() {
				const res = await getCourseList()
				const courseListA = res.rows.map(v => {
					return {
						value: v.id,
						label: v.name
					}
				})
				this.courseList = [...this.courseList, ...courseListA]
			},
			async getTraineeWorksList() {
				// uni.showLoading()
				const data = {
					traineeId: this.trainId,
					courseId: this.courseId
				}
				const {
					code,
					rows,
					total
				} = await getTraineeWorksList(data)
				if (code == 200) {
					if (rows) {
						this.imgList = rows
						this.imgSum = total
						this.info = this.imgList[0]
					} else {
						this.info = {}
					}
				}

			},
			prePicture() {
				if (this.imgIndex == 1) {
					uni.showToast({
						title: `已经是第一张啦`,
						icon: 'none',
						duration: 2000
					});
				} else {
					this.imgIndex = this.imgIndex - 1
					this.imgList.forEach((item, index) => {
						if (this.imgIndex == index + 1) {
			
							this.info = item
						}
					})
				}
			},
			nextPicture() {
				console.log("this.imgList.length", this.imgList.length);
				if (this.imgIndex == this.imgList.length) {
					uni.showToast({
						title: `已经是最后一张啦`,
						icon: 'none',
						duration: 2000
					});
				} else {
					// console.log("1",index);
					this.imgIndex = this.imgIndex + 1
					this.imgList.forEach((item, index) => {
						if (this.imgIndex == index + 1) {
			
							this.info = item
						}
					})
				}
			},
		}
	}
</script>

<style>
	.work-img {
		width: 100%;
		height: 250rpx;
	}

	.work-choose {
		width: 250rpx;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #3f3f3f;
		padding: 30rpx;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 26rpx;
		position: absolute;
		top: 150rpx;
		left: 60rpx;
	}

	.img-sum {
		width: 100rpx;
		height: 50rpx;
		background-color: #bfcfe0;
		opacity: .7;
		text-align: center;
		line-height: 50rpx;
		margin: 40rpx auto;
		color: #ffffff;
		border-radius: 50rpx;
		border: 2rpx solid #ffffff;

	}

	.img-operate {
		display: flex;
		justify-content: space-between;
		padding: 70rpx;
	}

	.img-content {
		width: 80%;
		margin: 30rpx auto;
		background-color: #ffffff;
	}

	.img-style {
		width: 100%;
		height: 500rpx;
	}

	.img-name {
		margin-top: 40rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.img-tag {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.user-style {
		color: #b3b3b3;
		font-size: 24rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.all-course {
		width: 170rpx;
		height: 60rpx;
		background-color: #bfcfe0;
		opacity: .7;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		border-radius: 50rpx;
		border: 2rpx solid #ffffff;
		font-size: 26rpx;
	}

	.pre-pic {
		color: #ffffff;
		margin-top: 15rpx;
	}

	.no-work {
		text-align: center;
		margin-top: 100rpx;
		color: #fff;

	}
</style>